<template>
  <div class="report">
    <div class="title">添加报告</div>
    <div class="flex flex-left align-center report-one">
      <span class="report-one-span">名称</span>
      <van-field v-model="reportName" placeholder="请输入报告名称" maxlength="20" border/>
    </div>
    <div class="report-upload">
      <van-uploader class="report-upload-photo" v-model="fileImg" :before-read="beforeRead" :max-count="1">
        <div class="flex flex-center align-center flex-wrap report-upload-photo-center">
          <van-icon name="plus" size="40" color="#999"/>
          <div class="report-upload-photo-title">上传照片</div>
        </div>
      </van-uploader>
    </div>
    <div class="flex flex-left report-remark">
      <span class="flex flex-left align-center report-one-span report-remark-span">添加备注</span>
      <div class="report-remark-content">
        <van-field
            v-model="blContent"
            rows="4"
            autosize
            type="textarea"
            placeholder="请输入备注"
        />
      </div>
    </div>
    <div class="report-btn" v-if="type != '0'">
      <van-button type="primary" style="width:100%" color="#42DDA2" :loading="isLoading" @click="saveReportFunc()">保存
      </van-button>
    </div>
  </div>
</template>
<script>
import {createApp} from 'vue';
import {Toast} from 'vant';

const app = createApp();
app.use(Toast);
import * as qiniu from 'qiniu-js'
import {upload, saveProcessOne} from '@/api/index.js'
import {guid} from '@/utils/common'

let uploadUrl = 'https://public.qiniu.chenyu666.com/';
let fileList = []
export default {
  setup() {
    // 返回布尔值
    const beforeRead = (file) => {
      upload().then(res => {
        console.log('token', res.data)
        let token = res.data;
        const options = {
          quality: 0.92,
          noCompressIfLarger: true
        }

        let uuid = guid()
        console.log('file', file.name)
        let key = uuid + '.' + file.name.split('.')[1];
        qiniu.compressImage(file, options).then(data => {
          const observable = qiniu.upload(data.dist, key, token, {
            useCdnDomain: true,
            region: 'https://upload-z2.qiniup.com'
          })
          const observer = {
            next(res) {
              console.log('成功', res)
              uploadUrl = 'https://public.qiniu.chenyu666.com/' + key+"?imageslim";
              fileList.push(uploadUrl);
            },
            error(err) {
              console.log('失败', err)
            },
            complete(res) {
              console.log('继续', res)
            }
          }
          const subscription = observable.subscribe(observer) // 上传开始
          console.log('upload', subscription);
        })
      })

      return true;
    };

    // 返回 Promise
    const asyncBeforeRead = (file) =>
        new Promise((resolve, reject) => {
          if (file.type !== 'image/jpeg') {
            Toast('请上传 jpg 格式图片');
            reject();
          } else {
            const img = new File(['foo'], 'bar.jpg', {
              type: 'image/jpeg',
            });
            console.log('1111', '')
            resolve(img);
          }
        });

    return {
      beforeRead,
      asyncBeforeRead,
    };
  },
  data() {
    return {
      blContent: '',
      fileImg: [],
      type: '',
      reportName: '',
      isLoading: false
    }
  },
  created() {
    this.type = this.$route.query.type;
    if (this.type == '0') {
      let aJson = JSON.parse(sessionStorage.getItem('reportInfo'));
      this.reportName = aJson.name;
      this.blContent = aJson.remark;
      this.fileImg.push({url: aJson.url})
    }
  },
  methods: {
    // 保存报告
    saveReportFunc() {
      if (this.reportName == '') {
        this.$toast('请输入报告名称');
        return false;
      }
      if (fileList.length == 0) {
        this.$toast('请上传图片');
        return false;
      }
      if (this.blContent == '') {
        this.$toast('请输入备注');
        return false;
      }
      // 获取入院基本信息
      let processInfo = JSON.parse(sessionStorage.getItem('processInfo'));
      console.log(processInfo);
      let reportInfo = {
        hospitalOfTopThree: processInfo.baseProcessDataJson.hospitalOfTopThree,
        hospitalOfCommon: processInfo.baseProcessDataJson.hospitalOfCommon
      }
      if (this.type == '1') { // 三甲医院
        let arr = reportInfo.hospitalOfTopThree;
        let aJson = {
          name: this.reportName,
          remark: this.blContent,
          url: uploadUrl
        }
        arr.push(aJson);
        reportInfo.hospitalOfTopThree = arr;
      } else { // 综合医院
        let arr = reportInfo.hospitalOfCommon;
        let aJson = {
          name: this.reportName,
          remark: this.blContent,
          url: uploadUrl
        }
        arr.push(aJson);
        reportInfo.hospitalOfCommon = arr;
      }
      let data = {
        userId: processInfo.userId,
        processId: processInfo.processId,
        processData: JSON.stringify(reportInfo)
      }
      this.isLoading = true
      saveProcessOne(data).then(res => {
        console.log('save', res.data)
        this.$toast('添加报告成功！');
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000)
      }).catch(() => {
        this.isLoading = false
      })
    }
  }
}
</script>
<style scoped>
.report {
  width: auto;
  height: auto;
  padding: 30px 15px;
}

.report::-webkit-scrollbar {
  display: none;
}

.title{
  width: 100%;
  height: auto;
  color: #111;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}
.report-one {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #ececec;
}

.report-one-span {
  width: 60px;
  height: auto;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}

.report-upload {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.report-upload-photo {
  width: 100%;
  height: 345px;
}

/deep/ .van-uploader__wrapper {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
}

/deep/ .van-uploader__input-wrapper {
  width: 100%;
  background-color: #ececec;
}

/deep/ .van-uploader__preview, /deep/ .van-uploader__preview-image {
  width: 100%;
  height: 100%;
}

.report-upload-photo-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.report-upload-photo-title {
  width: 100%;
  height: auto;
  color: #666;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

.report-upload-toast {
  width: 100%;
  height: auto;
  color: #999;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  margin-top: 5px;
}

.report-remark {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.report-remark-span {
  height: 40px;
}

.report-remark-content {
  width: auto;
  height: auto;
  flex: 1;
  border-radius: 10px;
  margin-left: 10px;
  overflow: hidden;
  border: 1px solid #ececec;
}

.report-btn {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
</style>
